<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        context-menu
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :data="tableData"
        :export-config="{
          filename: '应用接入配置表',
          sheetName: '应用接入配置表',
        }"
      >
        <!-- 快速查询 -->
        <template v-slot:toolbar_search>
          <rayd-quick-query v-model="filterName" @query="query"></rayd-quick-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-button
            round
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
            v-permission-btn="'Add'"
            >新增</el-button
          >
          <el-button
            round
            type="warning"
            icon="el-icon-edit"
            @click="handleEdit"
            v-permission-btn="'Edit'"
            >编辑</el-button
          >
          <el-button
            round
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete"
            v-permission-btn="'Delete'"
            >删除</el-button
          >
          <el-divider direction="vertical"></el-divider>
        </template>
        <!-- 禁用/启用模板 -->
        <template v-slot:B_EnabledMark="{ row }">
          <vxe-switch
            v-model="row.B_EnabledMark"
            on-label="启用"
            :on-value="1"
            off-label="禁用"
            :off-value="0"
            @change="ChangeState(row)"
          ></vxe-switch>
        </template>
      </vxe-grid>
    </el-main>
    <!-- 拟态窗口 -->
    <Form ref="mainForm" @refresh="query()" />
  </el-container>
</template>

<script>
import { AppConfig, Manaframe } from "@/api";
import Form from "./Form.vue";
export default {
  components: { Form },
  computed: {
    //列配置
    tableColumn() {
      return [
        {
          type: "seq",
          title: "序号",
          fixed: "left",
          align: "left",
          width: 80,
        },
        {
          field: "B_Authorizer",
          title: "应用授权方",
          width: 200,
          cellRender: { name: 'manaframe' },
          sortable: true,
        },
        {
          type: "html",
          field: "B_AppId",
          title: "AppId",
          width: 200,
          sortable: true,
        },
        {
          type: "html",
          field: "B_AppSecret",
          title: "AppSecret",
          width: 350,
          sortable: true,
        },
        {
          field: "B_EnabledMark",
          title: "是否启用",
          width: 100,
          sortable: true,
          slots: { default: "B_EnabledMark" },
        },
        { type: "html", field: "B_Description", title: "备注", sortable: true },
      ];
    },
  },
  data() {
    return {
      /* vxe-grid */
      filterName: "", //查询实体
      tableData: [], //表格实体
      //工具栏配置
      tableToolbar: {
        export: true,
        refresh: { 
          query : ()=> {
            this.filterName = ''; //清空条件
            this.query();
          }
        },
        zoom: true,
        custom: true,
      },
      /* 实体数据 */
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING", true);
      /* 初始化数据源 */
      Promise.all([]).then(() => {
        this.query()
      });
    },
    //列表数据
    query() {
      this.$store.commit("SET_ISLOADING", true);
      return AppConfig.GetList({queryjson:JSON.stringify({QueryInfo:this.filterName})}).then((res) => {
        this.tableData = res;
        this.$store.commit("SET_ISLOADING", false);
      });
    },
    //状态变更
    ChangeState(row) {
      AppConfig.ChangeState({
        B_Id: row.B_Id,
        B_EnabledMark: row.B_EnabledMark,
      }).catch((err) => {
        //状态归位
        row.B_EnabledMark = !row.B_EnabledMark;
      });
    },

    //新增
    handleAdd() {
      this.$refs["mainForm"].formOpen();
    },
    //编辑
    handleEdit() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row);
      } else {
        this.$message.warning("请选择数据行！");
      }
    },
    //删除
    handleDelete() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
          .then(() => {
            AppConfig.Delete(row).then((res) => {
              this.query(); // 刷新表格
            });
          })
          .catch((e) => {});
      } else {
        this.$message.warning("请选择数据行！");
      }
    },
  },
};
</script>
